<template>
  <div
    :style="{width: width, height: height, marginTop: '50px'}"
    :id="echartsID"
  ></div>
</template>
<script>
import echarts from "echarts";

import "echarts/lib/chart/bar";
import "echarts/lib/component/tooltip";
import "echarts/lib/component/dataZoom";

export default {
  name: "echarts",
  props: {
    width: {
      type: String,
      default: "100%"
    },
    height: {
      type: String,
      default: "400px"
    },
    options: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      echartsID: "e-charts-" + Date.now()
    };
  },
  mounted() {
    this.chart = echarts.init(document.getElementById(this.echartsID));
    this.chart.setOption(this.options);
  },
  watch: {
    options(value) {
      this.chart.setOption(value);
    }
  }
};
</script>

